<template>
  <svg :width="width" :height="height" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48">
    <path
      fill="url(#a)"
      d="M0 16c0-5.6 0-8.4 1.09-10.54a10 10 0 0 1 4.37-4.37C7.6 0 10.4 0 16 0h16c5.6 0 8.4 0 10.54 1.09a10 10 0 0 1 4.37 4.37C48 7.6 48 10.4 48 16v16c0 5.6 0 8.4-1.09 10.54a10.001 10.001 0 0 1-4.37 4.37C40.4 48 37.6 48 32 48H16c-5.6 0-8.4 0-10.54-1.09a10 10 0 0 1-4.37-4.37C0 40.4 0 37.6 0 32V16Z"
    />
    <path
      fill="url(#b)"
      d="M0 16c0-5.6 0-8.4 1.09-10.54a10 10 0 0 1 4.37-4.37C7.6 0 10.4 0 16 0h16c5.6 0 8.4 0 10.54 1.09a10 10 0 0 1 4.37 4.37C48 7.6 48 10.4 48 16v16c0 5.6 0 8.4-1.09 10.54a10.001 10.001 0 0 1-4.37 4.37C40.4 48 37.6 48 32 48H16c-5.6 0-8.4 0-10.54-1.09a10 10 0 0 1-4.37-4.37C0 40.4 0 37.6 0 32V16Z"
    />
    <path
      fill="#000"
      fill-opacity=".04"
      fill-rule="evenodd"
      d="M1.133 9.513C1 11.131 1 13.183 1 16v16c0 2.817 0 4.87.133 6.486.131 1.606.387 2.695.848 3.6a9 9 0 0 0 3.933 3.933c.905.461 1.994.717 3.6.848C11.13 47 13.183 47 16 47h16c2.817 0 4.87 0 6.486-.133 1.606-.131 2.695-.387 3.6-.848a9 9 0 0 0 3.933-3.933c.461-.905.717-1.994.848-3.6C47 36.87 47 34.816 47 32V16c0-2.817 0-4.87-.133-6.487-.131-1.605-.387-2.694-.848-3.599a9 9 0 0 0-3.933-3.933c-.905-.461-1.994-.717-3.6-.848C36.87 1 34.816 1 32 1H16c-2.817 0-4.87 0-6.487.133-1.605.131-2.694.387-3.599.848a9 9 0 0 0-3.933 3.933c-.461.905-.717 1.994-.848 3.6ZM1.09 5.46C0 7.6 0 10.4 0 16v16c0 5.6 0 8.4 1.09 10.54a10 10 0 0 0 4.37 4.37C7.6 48 10.4 48 16 48h16c5.6 0 8.4 0 10.54-1.09a10.001 10.001 0 0 0 4.37-4.37C48 40.4 48 37.6 48 32V16c0-5.6 0-8.4-1.09-10.54a10 10 0 0 0-4.37-4.37C40.4 0 37.6 0 32 0H16C10.4 0 7.6 0 5.46 1.09a10 10 0 0 0-4.37 4.37Z"
      clip-rule="evenodd"
    />
    <path
      fill="url(#c)"
      d="M3 14.2c0-3.92 0-5.88.763-7.378a7 7 0 0 1 3.06-3.059C8.318 3 10.28 3 14.2 3h19.6c3.92 0 5.88 0 7.378.763a7 7 0 0 1 3.059 3.06C45 8.318 45 10.28 45 14.2v19.6c0 3.92 0 5.88-.763 7.378a7 7 0 0 1-3.06 3.059C39.682 45 37.72 45 33.8 45H14.2c-3.92 0-5.88 0-7.378-.763a7 7 0 0 1-3.059-3.06C3 39.682 3 37.72 3 33.8V14.2Z"
    />
    <path
      fill="url(#d)"
      fill-opacity=".7"
      d="M3 14.2c0-3.92 0-5.88.763-7.378a7 7 0 0 1 3.06-3.059C8.318 3 10.28 3 14.2 3h19.6c3.92 0 5.88 0 7.378.763a7 7 0 0 1 3.059 3.06C45 8.318 45 10.28 45 14.2v19.6c0 3.92 0 5.88-.763 7.378a7 7 0 0 1-3.06 3.059C39.682 45 37.72 45 33.8 45H14.2c-3.92 0-5.88 0-7.378-.763a7 7 0 0 1-3.059-3.06C3 39.682 3 37.72 3 33.8V14.2Z"
      style="mix-blend-mode: screen"
    />
    <path
      fill="#000"
      fill-opacity=".2"
      fill-rule="evenodd"
      d="M3.594 9.643C3.5 10.785 3.5 12.232 3.5 14.2v19.6c0 1.968 0 3.415.094 4.557.093 1.136.275 1.928.614 2.594a6.5 6.5 0 0 0 2.841 2.84c.667.34 1.458.522 2.594.615 1.142.094 2.589.094 4.557.094h19.6c1.968 0 3.415 0 4.557-.094 1.136-.093 1.928-.275 2.594-.614a6.499 6.499 0 0 0 2.84-2.841c.34-.666.522-1.458.615-2.594.094-1.142.094-2.589.094-4.557V14.2c0-1.968 0-3.415-.094-4.557-.093-1.136-.275-1.927-.614-2.594a6.5 6.5 0 0 0-2.841-2.84c-.666-.34-1.458-.522-2.594-.615C37.215 3.5 35.768 3.5 33.8 3.5H14.2c-1.968 0-3.415 0-4.557.094-1.136.093-1.927.275-2.594.614A6.5 6.5 0 0 0 4.21 7.05c-.34.667-.522 1.458-.615 2.594Zm.169-2.82C3 8.318 3 10.28 3 14.2v19.6c0 3.92 0 5.88.763 7.378a7 7 0 0 0 3.06 3.059C8.318 45 10.28 45 14.2 45h19.6c3.92 0 5.88 0 7.378-.763a7 7 0 0 0 3.059-3.06C45 39.682 45 37.72 45 33.8V14.2c0-3.92 0-5.88-.763-7.378a7 7 0 0 0-3.06-3.059C39.682 3 37.72 3 33.8 3H14.2c-3.92 0-5.88 0-7.378.763a7 7 0 0 0-3.059 3.06Z"
      clip-rule="evenodd"
    />
    <path
      fill="#fff"
      fill-opacity=".2"
      fill-rule="evenodd"
      d="M4.585 9.712C4.501 10.746 4.5 12.063 4.5 13.9v20.2c0 1.837 0 3.154.085 4.188.084 1.022.244 1.678.514 2.209A5.5 5.5 0 0 0 7.503 42.9c.53.27 1.187.43 2.21.514 1.033.084 2.35.085 4.187.085h20.2c1.837 0 3.154 0 4.188-.085 1.022-.084 1.678-.244 2.209-.514a5.5 5.5 0 0 0 2.404-2.404c.27-.53.43-1.187.514-2.21.084-1.033.085-2.35.085-4.187V13.9c0-1.837 0-3.154-.085-4.188-.084-1.022-.244-1.678-.514-2.209A5.5 5.5 0 0 0 40.496 5.1c-.53-.27-1.187-.43-2.21-.514-1.033-.084-2.35-.085-4.187-.085H13.9c-1.837 0-3.154 0-4.188.085-1.022.084-1.678.244-2.209.514A5.5 5.5 0 0 0 5.1 7.503c-.27.53-.43 1.187-.514 2.21ZM4.208 7.05C3.5 8.44 3.5 10.26 3.5 13.9v20.2c0 3.64 0 5.46.708 6.85a6.5 6.5 0 0 0 2.841 2.841c1.39.709 3.21.709 6.851.709h20.2c3.64 0 5.46 0 6.85-.709a6.499 6.499 0 0 0 2.841-2.84c.709-1.39.709-3.21.709-6.851V13.9c0-3.64 0-5.46-.709-6.85a6.5 6.5 0 0 0-2.84-2.842C39.56 3.5 37.74 3.5 34.1 3.5H13.9c-3.64 0-5.46 0-6.85.708A6.5 6.5 0 0 0 4.207 7.05Z"
      clip-rule="evenodd"
      style="mix-blend-mode: overlay"
    />
    <path
      fill="url(#e)"
      d="M18 11.347c-4.73 2.247-8 7.068-8 12.653 0 5.585 3.27 10.406 8 12.653V23.908c0-.3 0-.565.047-.829.04-.232.11-.458.204-.674.107-.245.254-.465.42-.715l.905-1.357a6.86 6.86 0 0 0 .212-.327L19.79 20l-.003-.006a6.86 6.86 0 0 0-.212-.327l-.904-1.357c-.167-.25-.314-.47-.421-.715a2.994 2.994 0 0 1-.204-.674C18 16.657 18 16.392 18 16.092v-4.745Z"
    />
    <path
      fill="url(#f)"
      d="M30 36.653c4.73-2.247 8-7.068 8-12.653 0-5.585-3.27-10.406-8-12.653v12.745c0 .3 0 .565-.047.829-.04.232-.11.458-.204.674-.107.245-.254.465-.42.715l-.905 1.357a6.86 6.86 0 0 0-.212.327L28.21 28l.003.006c.039.067.098.156.212.327l.904 1.357c.167.25.314.47.421.715.095.216.163.442.204.674.047.264.047.529.047.829v4.745Z"
    />
    <path
      fill="#fff"
      fill-opacity=".2"
      fill-rule="evenodd"
      d="M20.092 39.782a2 2 0 0 1-.874-.874C19 38.48 19 37.92 19 36.8V23.969c0-.36 0-.54.031-.714.028-.155.073-.306.136-.45.07-.162.17-.311.37-.611l.871-1.306c.214-.321.321-.482.363-.655a1 1 0 0 0 0-.466c-.042-.173-.149-.334-.363-.654l-.87-1.307c-.2-.3-.3-.45-.37-.611a1.998 1.998 0 0 1-.137-.45c-.03-.174-.03-.354-.03-.714V11.2c0-1.12 0-1.68.217-2.108a2 2 0 0 1 .874-.874C20.52 8 21.08 8 22.2 8h3.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C29 9.52 29 10.08 29 11.2v12.831c0 .36 0 .54-.031.714a1.998 1.998 0 0 1-.136.45c-.07.162-.17.311-.37.611l-.871 1.306c-.214.321-.321.482-.363.655a1 1 0 0 0 0 .466c.042.173.149.334.363.654l.87 1.307c.2.3.3.45.371.611.063.144.109.295.136.45.031.174.031.354.031.714V36.8c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C27.48 40 26.92 40 25.8 40h-3.6c-1.12 0-1.68 0-2.108-.218ZM19.791 20l-.003-.006a6.86 6.86 0 0 0-.212-.327l-.87-1.306-.034-.05c-.167-.25-.314-.471-.421-.716a3 3 0 0 1-.204-.674C18 16.657 18 16.392 18 16.092v-4.93c0-.528 0-.982.03-1.357.033-.395.104-.789.297-1.167a3 3 0 0 1 1.311-1.311c.378-.193.772-.264 1.167-.296C21.18 7 21.635 7 22.162 7h3.677c.527 0 .982 0 1.356.03.395.033.789.104 1.167.297a3 3 0 0 1 1.311 1.311c.193.378.264.772.297 1.167.03.375.03.83.03 1.357v12.93c0 .3 0 .565-.047.829a3 3 0 0 1-.203.674c-.108.245-.255.465-.422.715-.01.017-.022.034-.033.05l-.871 1.307a6.86 6.86 0 0 0-.211.327l-.004.006.004.006c.038.067.097.156.21.327l.872 1.306.033.05c.167.25.314.471.422.716a3 3 0 0 1 .203.674c.047.264.047.529.047.829v4.93c0 .528 0 .983-.03 1.357-.033.395-.104.789-.297 1.167a3 3 0 0 1-1.311 1.311c-.378.193-.772.264-1.167.296-.375.031-.83.031-1.356.031h-3.677c-.528 0-.982 0-1.357-.03-.395-.033-.788-.104-1.167-.297a3 3 0 0 1-1.311-1.311c-.193-.378-.264-.772-.296-1.167a17.23 17.23 0 0 1-.03-1.356v-12.87L18 23.908c0-.3 0-.565.047-.829a3 3 0 0 1 .204-.674c.107-.245.254-.465.42-.715l.034-.05.871-1.307a6.86 6.86 0 0 0 .212-.327L19.79 20Z"
      clip-rule="evenodd"
      style="mix-blend-mode: overlay"
    />
    <path
      fill="#000"
      fill-opacity=".7"
      d="M19 11.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C20.52 8 21.08 8 22.2 8h3.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C29 9.52 29 10.08 29 11.2v12.831c0 .36 0 .54-.031.714a2.003 2.003 0 0 1-.136.45c-.07.162-.17.311-.37.611l-.871 1.306c-.214.321-.321.482-.363.655a1 1 0 0 0 0 .466c.042.173.149.334.363.654l.87 1.307c.2.3.3.45.371.611.063.144.108.295.136.45.031.174.031.354.031.714V36.8c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C27.48 40 26.92 40 25.8 40h-3.6c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C19 38.48 19 37.92 19 36.8V23.969c0-.36 0-.54.031-.714.028-.155.073-.306.136-.45.07-.162.17-.311.37-.611l.871-1.306c.214-.321.321-.482.363-.655a1 1 0 0 0 0-.466c-.042-.173-.149-.334-.363-.654l-.87-1.307c-.2-.3-.3-.45-.371-.611a2.003 2.003 0 0 1-.136-.45C19 16.571 19 16.391 19 16.031V11.2Z"
    />
    <defs>
      <linearGradient id="a" x1="24" x2="24" y1="0" y2="48" gradientUnits="userSpaceOnUse">
        <stop stop-color="#174299" />
        <stop offset="1" stop-color="#001E59" />
      </linearGradient>
      <linearGradient id="b" x1="24" x2="24" y1="0" y2="48" gradientUnits="userSpaceOnUse">
        <stop stop-color="#D2D8E4" />
        <stop offset="1" stop-color="#C2C9D6" />
      </linearGradient>
      <linearGradient id="e" x1="24" x2="24" y1="10" y2="38" gradientUnits="userSpaceOnUse">
        <stop stop-opacity=".12" />
        <stop offset="1" stop-opacity=".04" />
      </linearGradient>
      <linearGradient id="f" x1="24" x2="24" y1="10" y2="38" gradientUnits="userSpaceOnUse">
        <stop stop-opacity=".12" />
        <stop offset="1" stop-opacity=".04" />
      </linearGradient>
      <radialGradient
        id="c"
        cx="0"
        cy="0"
        r="1"
        gradientTransform="rotate(-40.077 69.815 48.665) scale(82.9048)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset=".276" stop-color="#20FF4D" />
        <stop offset=".464" stop-color="#1499FF" />
        <stop offset=".755" stop-color="#FF6FC6" />
        <stop offset="1" stop-color="#BC67FF" />
      </radialGradient>
      <radialGradient
        id="d"
        cx="0"
        cy="0"
        r="1"
        gradientTransform="rotate(45 2.52 -6.082) scale(68.6777)"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="red" />
        <stop offset="1" stop-color="#00A3FF" />
      </radialGradient>
    </defs>
  </svg>
</template>
<script setup lang="ts">
  withDefaults(defineProps<{ width?: number; height?: number }>(), {
    width: 48,
    height: 48
  })
</script>
